<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <input v-focus /> -->
      <div v-demo:style.red.900="50">hello</div>
      <div v-demo:style.green.500="100">world</div>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 注册一个全局自定义指令 `v-focus`
      // Vue.directive("focus", {
      //   // 当被绑定的元素插入到 DOM 中时……
      //   inserted: function (el) {
      //     // 聚焦元素
      //     el.focus();
      //   },
      // });

      new Vue({
        el: "#app",
        data: {},
        // 局部定义自定义指令
        // directives: {
        //   focus: {
        //     bind(el, binding, vnode, oldVnode) {},
        //     inserted(el, binding, vnode, oldVnode) {},
        //     update(el, binding, vnode, oldVnode) {},
        //     componentUpdated(el, binding, vnode, oldVnode) {},
        //     unbind(el, binding, vnode, oldVnode) {},
        //   },
        // },
        directives: {
          // 在 bind 和 update 时触发相同行为，而不关心其它的钩子
          demo(el, binding, vnode, oldVnode) {
            console.log(el);
            console.log(binding);

            const { arg, modifiers, value } = binding;
            const [weight, color] = Object.keys(modifiers); // ["900", "red"]
            /*
              arg: "style"
              def: {bind: ƒ, update: ƒ}
              expression: "50"
              modifiers: {900: true, red: true}
              name: "demo"
              rawName: "v-demo:style.red.900"
              value: 50
            */
            el[arg].color = color;
            el[arg].fontWeight = weight;
            el[arg].fontSize = value + "px";
          },
        },
      });
      /*
        el：指令所绑定的元素，可以用来直接操作 DOM。
        binding：一个对象，包含以下 property：
          name：指令名，不包括 v- 前缀。
          value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
          oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
          expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
          arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
          modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
        vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
        oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
      */
    </script>
  </body>
</html>
